<template>
  <div style="width: 1200px; margin: auto">
    <div
      style="
        width: 100%;
        margin-top: 5px;
        padding: 5px;
        font-size: 20px;
        border-radius: 5px;
        border: 1px solid #999;
      "
    >
      <span style="color: red"> Instruction:</span>Please input a list of gene
      names or upload a table of genes. You can input one gene per row or
      separate them with commas. Examples are provided in the link.
    </div>

    <div
      style="
        font-size: 16px;
        font-weight: 700;
        width: 100%;
        text-align: center;
        margin-top: 50px;
      "
    >
      <p>Gene List</p>

      <el-input
        :input-style="{height: '300px'}"
        v-model="genes"
        style="width: 260px"
        :autosize="{minRows: 10, maxRows: 400}"
        @change="chus"
        type="textarea"
        placeholder="Please input"
      />

      <!-- <div v-for="(item, index) in gene" :key="index" style="margin: 10px 0">
        <el-input
          style="width: 300px"
          v-model="gene[index]"
          placeholder="Please input Gene"
        />
        <img
          style="
            cursor: pointer;
            width: 20px;
            margin-left: 5px;
            vertical-align: middle;
          "
          @click="jian(index)"
          src="../../assets/减少.png"
          alt=""
        />
      </div> -->
      <!-- <div>
        <img
          @click="add"
          style="width: 30px; cursor: pointer"
          src="../../assets/jia.png"
          alt=""
        />
      </div> -->
    </div>
    <div style="width: 600px; color: #999; margin: 40px auto">
      Example:
      <br />
      <span
        >AKT1,CALM1,CAV1,CYGB,DDAH1,DNM2,HSP90AA1,LYPLA1,NOS3,NOSIP,NOSTRIN,SPR,WASL,ZDHHC21</span
      >
      <el-icon
        @click="
          copy(
            `AKT1\nCALM1\nCAV1\nCYGB\nDDAH1\nDNM2\nHSP90AA1\nLYPLA1\nNOS3\nNOSIP\nNOSTRIN\nSPR\nWASL\nZDHHC21`
          )
        "
        style="cursor: pointer"
        ><DocumentCopy
      /></el-icon>
    </div>
    <div style="text-align: right">
      <el-button @click="submit" type="primary">Submit</el-button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router";
import {h} from "vue";
import {ElNotification} from "element-plus";
import {ref, onMounted, reactive, computed, onUpdated} from "vue";

const router = useRouter();
let genes = ref("");
let gene = ref([null, null, null, null, null, null]);
const add = () => {
  gene.value.push(null);
};
const jian = (index) => {
  console.log(index);
  gene.value.splice(index, 1);
};
const chus = () => {};
const submit = async () => {
  let b = genes.value.split("\n");
  let a = b.filter((item) => item);

  router.push({
    name: "analysisList",
    query: {
      list: JSON.stringify(a),
    },
  });
};

const copy = (val) => {
  // 创建一个 textarea 元素
  let copyTextarea = document.createElement("textarea");
  copyTextarea.value = val; // 将值赋给 textarea，换行符会被保留
  copyTextarea.style.position = "fixed"; // 可以设置为不可见，避免影响页面布局
  copyTextarea.style.opacity = "0";
  document.body.appendChild(copyTextarea); // 将 textarea 添加到 body 中
  copyTextarea.select(); // 选中 textarea 中的所有文本
  document.execCommand("copy"); // 执行复制操作
  document.body.removeChild(copyTextarea); // 复制完成后移除 textarea  };

  ElNotification({
    title: "Title",
    message: h("i", {style: "color: teal"}, "Copy successful"),
  });
};
</script>

<style></style>
